<template>
    <el-form ref="smsLoginForm" :model="smsFormData" status-icon :rules="smsRules" label-width="120px" class="demo-smsFormData">
        <el-form-item label="手机号" prop="phone" class="phone-form-item">
        <el-input v-model="smsFormData.phone" maxlength="11"/>
            <span>
              <button @click="sendSms">
                {{desc}}
              </button>
            </span>
        </el-form-item> 
        <el-form-item label="验证码" prop="code" class="code-form-item">
            <el-input v-model="smsFormData.code" maxlength="5"/>
        </el-form-item>
        <el-form-item class="login-button">
            <el-button type="primary" @click="submitForm(smsLoginForm)">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
  // 业务
    // 1.修改表单注入的数据以及prop
    // 2.给smsLogin这个组件添加自己的表单的校验规则

  import { reactive, ref,onUnmounted } from 'vue'
  // 引入校验函数
  import {smsRules,useSubmitForm} from "../../composition/login/validate"
  // 引入发送请求的方法
  import * as api from "@/api/users.js"
  // 引入路由对象
  import {useRouter} from "vue-router"
  // 引入消息提示
  import { ElMessage } from 'element-plus'
   // 引入store
   import {useUser} from "@/store/users"
     // 引入loading动画加载框
  import { ElLoading } from 'element-plus'
   // 使用store
   let userStore = useUser();

  // 使用路由对象
  let router = useRouter()

  // 表单校验成功之后，回调的方法
  let validateSuccess= async () => {
    console.log('校验成功');
    // 发送短信登录的请求
    let loadingInstance = ElLoading.service({
        text:'正在登录...',
        background:'rgba(0,0,0,.4)'
      })
      // 发送短信登录的请求
    try{
      let res = await api.smsApi(smsFormData.code)
       // 关掉加载动画框
       loadingInstance.close()
      console.log(res);
       // 存储token,存到sessionStorage中
       sessionStorage.setItem('my-token',res.data.token)
        // 存储用户信息
        userStore.$patch({
          userInfo:res.data.userInfo
        })
        //存储用户权限
        localStorage.setItem(
          "permissionButtons",
          JSON.stringify(res.data.permission.buttons)
        );   
      // 页面要跳转
      router.push("/")
    }catch(e){
      console.log(e);
       // 关掉加载动画框
       loadingInstance.close()
    }
  }
  // 表单校验失败之后，回调的方法
  let validateFailed=()=>{
    console.log('校验失败');
  }
  // 使用submitForm
  let submitForm = useSubmitForm(validateSuccess,validateFailed)
  const smsLoginForm = ref()
  // 注入到表单的数据
  const smsFormData = reactive({
    phone: '',
    code: '',
  })
  // 短信登录的流程
    // 1.输入手机号，点击发送按钮，获取短信验证码
      // 短信验证码需要进行倒计时提示
      // 手机验证码同一个手机，一分钟只能发送一次，一天一个手机号只能发送六次
    // 2.输入短信验证码，进行登录请求
  // 声明一个响应式变量，改变按钮中间的文字
  let desc = ref('点击发送')
  // 引用定时器，便于组件卸载的时候，清除定时器
  let timeDownInterval = null;
  // 处理用户频繁点击的问题
    // 应用开关的思想
    // 初始值用户未点击
  let isClick = false;
  // 点击事件
  let sendSms = async () => {
    if(!isClick){
      // 发起获取短信验证码的请求
      try{
          let res =await api.getSmsCodeApi(smsFormData.phone)
          console.log(res);  
          ElMessage({
            message: '短信验证码发送成功.',
            type: 'success',
          }) 
          // 调用倒计时函数
          timeDownInterval=timeDown(60,desc,'s后发送',desc.value,()=>{
            // 让点击状态isClick恢复到未点击
            isClick = false
          })   
        }catch(e){
          console.log(e);
          // 将开关重置
          isClick = false;
          ElMessage({
            message: e,
            type: 'error',
          })
          return
        }
      }
      // 标记isClick已经被点击了
      isClick = true   
    }
  //  封装的思路，目的就是为了让使用能够变简单，复杂的逻辑放在函数内部

  // 字符串. padStart('希望几位数'，'用什么字符去补')

  // 短信倒计时的方法
  /**
   * 
   * @param {Number} timer 倒计时的时间
   * @param {Object} param 需要变更的响应式变量
   * @param {Stirng} msg 倒计时秒数的文字
   * @param {Stirng} endMsg 倒计时结束之后，回显的文字
   * @param {Function} cb 倒计时结束之后回调的函数
   */
  let timeDown=(timer=5,param,msg,endMsg,cb)=>{
    // 实现思路，核心就是间隔定时器setInterval
    let count =timer;
    // 一旦调用倒计时函数，就要显示倒计时的秒数
    param.value =(count+'').padStart(2,0)+msg;
    let interval = setInterval(()=>{
      // 让时间1秒秒减少
      count--
      // console.log(999);
      if(count<=0){
        // 清除定时器
        clearInterval(interval)
        // 倒计时结束
        param.value  = endMsg
        // 回调传入的函数
        cb && cb()
        return 
      }
      param.value =(count+'').padStart(2,0)+msg;
    },1000)
    // 返回定时器的引用
    return interval
  }
  // 组件卸载的钩子
  onUnmounted(()=>{
    // 卸载定时器
    // console.log('组件被卸载了');
    // 如果定时器存在，组件卸载的时候也需要清除定时器
    if(timeDownInterval){
      clearInterval(timeDownInterval)
    }
  })
</script>
<style lang="less" scoped>
 .demo-smsFormData{
     padding-right: 50px;
   }
   .username-form-item{
     margin-bottom: 30px;
     position: relative;
     font-size: 14px;
     :deep(.el-form-item__label){
       color:#fff
     }
     .el-input{
       width:300px;
       font-size: 14px;
       :deep(.el-input__inner){
         color:red
       }
     }
   }
   .code-form-item{
     margin-bottom: 30px;
     :deep(.el-form-item__label){
       color:#fff
     }
     .el-input{
       width:300px;
     }
   }
   .phone-form-item{
    margin-bottom: 30px;
     :deep(.el-form-item__label){
       color:#fff
     }
     .el-input{
       width:130px;
     }
      .el-input :deep(.el-input__wrapper) {
     background-color: #FFFFFF;
     box-shadow: 0 0 0 0;
     border-bottom-right-radius: 0px;
     border-top-right-radius: 0px;
     }
    span{
      width:100px;
      background: #fff;
      border-radius: 0 5px 5px 0;
      height: 32px;
      button{
        border: none;
        background: none;
        cursor: pointer;
    }
    }
   }
   .login-button{
     .el-button{
       width:250px;
       background: linear-gradient(90deg,#1596fb,#002dff);
     }
   }
 </style>